import { useState, useEffect } from 'react';
import { history } from 'umi';
import bgImage from '@/assets/p2/background1.png'; //背景图片
import '@/pages/p2/yingbuzu.css'
import '@/pages/p2/gamepage.css'
import Dialog from "@/components/Dialog"; //对话组件
import dialogImage from "@/assets/p1/dialog_background_red.png";
import TreasureBox from "@/components/TreasureBox"; //百宝袋组件
import AchievementList from "@/components/AchievementList"; //成就组件
import Card from "@/components/Card";
import people1 from '@/assets/p2/people1.png';
import people3 from '@/assets/p2/people3.png';
import dui from '@/assets/p1/checked.png'
import cuo from '@/assets/p2/cross.png'

import Character from "@/components/Character"; //角色组件
import characterImage from "@/assets/p1/characters/protagonist.png";
import front1 from "@/assets/p1/front1.png";
import front2 from "@/assets/p1/front2.png";
import front3 from "@/assets/p1/front3.png";
import back1 from "@/assets/p1/back1.PNG";
import back2 from "@/assets/p1/back2.PNG";
import back3 from "@/assets/p1/back3.PNG";
import left1 from "@/assets/p1/left1.png";
import left2 from "@/assets/p1/left2.png";
import left3 from "@/assets/p1/left3.png";
import right1 from "@/assets/p1/right1.png";
import right2 from "@/assets/p1/right2.png";
import right3 from "@/assets/p1/right3.png";

const yingbuzu = () => {
    const [select, setSelect] = useState(false);
    const [img1, setImg1] = useState(false);
    const [img2, setImg2] = useState(false);
    const [img3, setImg3] = useState(false);
    const [img4, setImg4] = useState(false);
    const [dialog1, setDialog1] = useState(false);
    const [dialog2, setDialog2] = useState(false);
    const [isSuccess, setIsSuccess] = useState(false);

    const screenWidth = window.innerWidth;
	const screenHeight = window.innerHeight;
    const [renX, setRenX] = useState(0.7 * screenWidth);
	const [renY, setRenY] = useState(0.75 * screenHeight);
    const [characterPosition, setCharacterPosition] = useState({
		x: renX,
		y: renY,
	});
	const characterImages = {
		front: [front1, front2, front3, front2],
		left: [left1, left2, left3, left2],
		right: [right1, right2, right3, right2],
        back: [back1, back2, back3, back2]
	};
	const handlePositionChange = newPosition => {
		setCharacterPosition(newPosition);
	};
	useEffect(() => {
		const { x, y } = characterPosition;
		if (
			x > 0.08 * screenWidth &&
			y > 0.4 * screenHeight &&
			y < 0.5 * screenHeight &&
			x < 0.12 * screenWidth &&
            !isSuccess
        ){
			setDialog1(true);
        }
	});

    const dialogues = [ "哥哥，我也有一个问题，我和小伙伴们想要一起买米。",
                        "如果每人出九铜板，会多出十一铜板；每人出六铜板，则会少十六铜板", 
                        "猜猜我们共有多少人，每人要花多少个铜板呢？",
                        "根据《九章算术》中“盈不足”章节的计算方法，请算出有多少个小朋友？米价多少？",
                        "如果每人出九铜板，会多出十一铜板；每人出六铜板，则会少十六铜板; 小孩（ ）人，米价（ ）个铜板"
                    ];
    const dialogues2 = ["太棒啦，答对喽！",""];
    
    // 判断选项对错
    const xuan1 = () => {
        setImg1(true);
    }
    const xuan2 = () => {
        setImg2(true);
    }
    const xuan3 = () => {
        setImg3(true);
    }    
    const xuan4 = () => {
        setImg4(true);
        setDialog1(false);
        setDialog2(true);
        setSelect(false);
    }

    const chengjiu = () => {

    }

    return(
        <div className='game-page' style={{ backgroundImage: `url(${bgImage})` }}>
            <TreasureBox itemId={4}/>
            <AchievementList achievementId={6} handleClick={chengjiu}/>
            {dialog1 &&            
            (<Dialog backgroundImage={dialogImage} dialogues={dialogues}
                    triggerIndexEvents={[4]}
                    eventHandlers={[
                        () => {
                            setSelect(true);
                        }
                    ]}
                    dialogueImages={[{rightImage:people3}, {rightImage:people3}, {rightImage:people3}, {},
                        {leftImage:people1}
                    ]}>
            </Dialog>)}
            <ul style={{display : select ? 'block' : 'none'}}>
                <li className='xuan' onClick={xuan1}>
                    6&nbsp; 54
                    {img1 && (<img className='duicuo' src={cuo}/>)}  
                </li>
                <li className='xuan' onClick={xuan2}>
                    7&nbsp; 65
                    {img2 && (<img className='duicuo' src={cuo}/>)}     
                </li>
                <li className='xuan' onClick={xuan3}>
                    8&nbsp; 76
                    {img3 && (<img className='duicuo' src={cuo}/>)}  
                </li>
                <li className='xuan' onClick={xuan4}>
                    9&nbsp; 70
                    {img4 && (<img className='duicuo' src={dui}/>)}
                </li>
            </ul>
            <Character
				characterImage={characterImage}
				characterImages={characterImages}
				canMove={true}
				initPositionX={renX}
				initPositionY={renY}
				onPositionChange={handlePositionChange}
				ifProtagonist="true"
			/>
            {dialog2 &&
            (<Dialog backgroundImage={dialogImage} dialogues={dialogues2}
                    triggerIndexEvents={[1]}
                    eventHandlers={[
                        () => {
                            setIsSuccess(true);
                            setDialog2(false);
                            setDialog1(false);
                        }
                    ]}
                    dialogueImages={[{rightImage:people3}]}> 
            </Dialog>)
            }
            {isSuccess&&
            (<Card
					onClick={() => {
                        history.push('/p2/shanggong');
					}}
					visible={true}
					cardId={6}
				>
					<p>获得成就</p>
					<p>盈不足</p>
			</Card>)}
        </div>
    );
}

export default yingbuzu